<template>
  <div class="edito" ref="edito">
    <!-- <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div> -->
  </div>
</template>

<script>
import E from "wangeditor";
import { uploadfile } from '@/api/firstPage'
import { getuuid } from '@/utils/index.js';
import { getToken } from '@/utils/auth' // get token from cookie
import request from "@/utils/request";
export default {
  name: "editoritem",
  data() {
    return {
      editor: '',
      info_: null,
      baseURL: request.defaults.baseURL, // 请求根路径
      imgUrl: "",
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "<p><br/></p>",
    },
    link:{
      type: String,
      default: "#",
    }
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
  },
  mounted() {
    this.seteditor();
    this.editor.txt.html(this.value);
  },
  methods: {
    insertImg(imgUrl) {
      this.editor.cmd.do(
      'insertHTML',
      `<a href='[%corp_url%]'><img src="${imgUrl}" data-href="${imgUrl}" style="max-width:100%;"/></a>`
      )
    },
    // 富文本图片存在回显失败问题，建议自己在合适的区域由父组件代替触发
    updateText() {
      const dom = document.querySelector(".w-e-text");
      dom.innerHTML = this.value;
    },
    // 富文本图片存在清除失败问题，建议自己在合适的区域由父组件代替触发
    clearText() {
      const dom = document.querySelector(".w-e-text");
      dom.innerHTML = "<p><br/></p>";
    },
    sethtml(val){
      this.$nextTick(()=>{
        this.editor.txt.html(val) // 重新设置编辑器内容
      })
    },
    setTxT(val){
      this.$nextTick(()=>{
        this.editor.cmd.do('insertHTML', val) // 重新设置编辑器内容
      })
    },
    seteditor() {
      let that = this;
      // http://192.168.2.125:8080/admin/storage/create
      this.editor = new E(this.$refs.edito);
      this.editor.config.jsonContent = [
          { fontSize: "13px" }
      ]
      this.editor.config.menuTooltipPosition = 'down'
      // this.editor.config.uploadImgShowBase64 = true // base 64 存储图片
      this.editor.config.showLinkImg = true // 是否支持超链接图片   此时特别注意：showLinkImg属性与uploadImgServer属性不能同时存在，官方文档有说明
      this.editor.config.showLinkImgAlt = false // 配置alt选项
      this.editor.config.showLinkImgHref = true // 配置超链接
      // this.editor.config.uploadImgServer = process.env.VUE_APP_BASE_API + '/upload'; // 配置服务器端地址  此处请自行填写
      this.editor.config.uploadImgParamsWithUrl = true;
      // this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
      this.editor.config.debug = true; // 开启debug模式
      this.editor.config.withCredentials = true;
      this.editor.config.uploadImgHeaders = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Access-Control-Allow-Origin': 'origin',
        'Authorization': 'Bearer ' + getToken() // 设置请求头
      }
      this.editor.config.uploadImgMaxSize = 300 * 1024; // 将图片大小限制为 300k
      this.editor.config.uploadImgMaxLength = 3; // 限制一次最多上传 3 张图片
      this.editor.config.uploadImgTimeout = 30000; // 设置超时时间
      // this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
      //   // resultFiles 是 input 中选中的文件列表
      //   // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      //   console.log(resultFiles);
      //   let formData = new FormData();
      //   formData.append('CmdCode', "UploadEMailAttatch");
      //   formData.append('FileName', resultFiles[0].name);
      //   formData.append('InnerName', getuuid());
      //   formData.append('file', resultFiles[0]);
      //   formData.append('Token', getToken());
      //   const res = await uploadfile('UploadEMailAttatch',formData)
      //   if(res.Status.StatusCode === 0) {
      //   // 上传图片，返回结果，将图片插入到编辑器中
      //     insertImgFn(imgUrl)
      //   }
      // }
      // this.editor.config.uploadImgHooks = {
      //   before: function (xhr, editor, file) {
      //     let formData = new FormData();
      //     formData.append("file", file[0]);
      //     request({
      //       method: "post",
      //       data: formData,
      //       url: "/cmpp-manage/marketFileUpload/upload",
      //     })
      //       .then((res) => {
      //         console.log(res);
      //         if (res.code) {
      //           this.imgUrl = res.data;
      //         }
      //       })
      //       .catch((err) => {
      //         console.log("err: ", err);
      //       });
      //   },

      //   customInsert: function (insertImgFn, result) {
      //     setTimeout(() => {
      //       console.log("图片链接: ", this.imgUrl);
      //       insertImgFn(this.imgUrl);
      //     }, 1000);
      //     //customInsert是异步函数，一开始没有获取到this.imgUrl
      //     // result 即服务端返回的接口
      //     // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      //     // insertImgFn(process.env.VUE_APP_PICTURE + result.data)
      //     // insertImgFn(this.imgUrl)
      //   },
      // };
      // 配置菜单
      this.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "indent", // 缩进
        "lineHeight", // 行高
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "todo", // 代办事项
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "table", // 表格
        "video", // 插入视频
        "code", // 插入代码
        "splitLine", // 分割线
        "undo", // 撤销
        "redo", // 重复
        "image", // 插入图片
      ];
      // this.editor.config.showFullScreen = true

      
      // wangeditor富文本编辑器插入网络图片的回调事件
      // this.editor.config.uploadImgHooks = {
      //   // 上传图片之前
      //   before: function(xhr) {
      //     if(that.link = '#'){
      //       return {
      //         prevent: true,
      //         msg: '需要提示给用户的错误信息'
      //       }
      //     }
      //   },
      // }
      this.editor.config.linkImgCallback = function (src, alt, href) {
        // 由于获取的所有img标签会形成为 NodeList [img] 存储 此处使用Array.prototype.slice.call方法将其转换为数组
          let dom = Array.prototype.slice.call(document.querySelector(".w-e-text").querySelectorAll("img"));
        // 判断dom元素是否存在，防止报错
        if (dom) {
          try {
            // 对dom数组进行循环
            dom.map((x, index) => {
              // dom[index]此时是一个数组，根据索引找到对应图片属性对象，里面有很多关于这img标签的属性，outerHTML为其中img标签
              if ((x = dom[index].outerHTML)) {
                // 此处直接改变对图片属性里的img标签进行改变
                // 由于wangeditor富文本编辑器会对跳转链接进行编码，此处用decodeURIComponent进行解码
                // dom[index].dataset.href 为编码后的跳转链接
                dom[index].outerHTML = `<a href=${decodeURIComponent(dom[index].dataset.href)}>${dom[index].outerHTML}</a>`;
                // dom[index].outerHTML = `<a href=${that.link}">${dom[index].outerHTML}</a>`;
              }
            });
          } catch (e) {
            console.log(e);
            return e;
          }
        }
      };
      // this.editor.config.uploadImgFromMedia = function () {
      // // 做调起媒体库UI等的自定义方法
      // // 举个栗子，假设通过confirm方法来模拟调用媒体库
      // // const img = confirm('调用媒体库')
      // const img = that.$emit('imgdialogopen')
      // if (img) {
      //   const imgUrl = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      //   // 通过editor.cmd.do方法将媒体库回调的链接插入编辑器内
      //   that.editor.cmd.do(
      //     'insertHTML',
      //     `<img src="${imgUrl}" style="max-width:100%;"/>`
      //   )
      // } else {
      //   console.log('cancel')
      // }
      // }
      this.editor.config.onchange = (text) => {
        this.info_ = text.trim(); // 绑定当前组件的值
        this.$emit("change", this.info_); // 将内容同步到父组件中
      };
      const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
      // 第一，菜单 class ，Button 菜单继承 BtnMenu class
      class AlertMenu extends BtnMenu {
        constructor(editor) {
          // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
          const $elem = E.$(
            `<div class="w-e-menu newbutton" data-title="网络图片资源选择">
              <i class="el-icon-film" style="font-size:18px;"></i>
            </div>`
          )
          super($elem, editor)
        }
        // 菜单点击事件
        clickHandler() {
          that.$emit('imgdialogopen')
        }
        tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
        }
      }
      class AlertMenu2 extends BtnMenu {
        constructor(editor) {
          // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
          const $elem = E.$(
            `<div class="w-e-menu newbutton2" data-title="导入自定义邮件">
              <i class="el-icon-upload" style="font-size:20px;"></i>
            </div>`
          )
          super($elem, editor)
        }
        // 菜单点击事件
        clickHandler() {
          that.$emit('fileclick')
        }
        tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
        }
      }
      class AlertMenu3 extends BtnMenu {
        constructor(editor) {
          // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
          const $elem = E.$(
            `<div class="w-e-menu newbutton3" data-title="插入分隔符">
              <i class="el-icon-date" style="font-size:20px;"></i>
            </div>`
          )
          super($elem, editor)
          
        }
        // 菜单点击事件
        clickHandler() {
          that.$emit('delimiter')
        }
        tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
        }
      }
      class AlertMenu4 extends BtnMenu {
        constructor(editor) {
          // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
          const $elem = E.$(
            `<div class="w-e-menu newbutton4" data-title="AI软文书写">
              <i class="el-icon-cpu" style="font-size:20px;"></i>
            </div>`
          )
          super($elem, editor)
        }
        // 菜单点击事件
        clickHandler() {
          that.$emit('aiSoftText')
        }
        tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
        }
      }
      const menuKey = 'alertMenuKey' 
      const menuKey2 = 'alertMenuKey2' 
      const menuKey3 = 'alertMenuKey3' 
      const menuKey4 = 'alertMenuKey4' 
      // 注册菜单
      this.editor.menus.extend(menuKey, AlertMenu)
      this.editor.menus.extend(menuKey2, AlertMenu2)
      this.editor.menus.extend(menuKey3, AlertMenu3)
      this.editor.menus.extend(menuKey4, AlertMenu4)
      // 将菜单加入到 editor.config.menus 中    const menuKey = 'alertMenuKey' 
      // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)
      this.editor.config.menus = this.editor.config.menus.concat(menuKey).concat(menuKey2).concat(menuKey3) //.concat(menuKey4)
      // 创建富文本编辑器
      this.editor.create();
    },
  },
};
</script>

<style lang="css">
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.toolbar {
  border: 1px solid #ccc;
  flex-wrap: wrap;
}
.text {
  border: 1px solid #ccc;
  border-top: none;
  min-height: 300px;
}
.w-e-text p {
  margin: 10px 0;
  line-height: 1.5;
}
.w-e-menu .w-e-panel-container .w-e-panel-tab-content input[type=text].block{
  margin: 15px 0;
}
</style>